<template>
  <page class="app-container">
    <el-button style="float: right; padding: 3px 0" type="text">实收金额：{{income / 100}}元</el-button>
    <el-tabs v-model="tabName" type="card" @tab-click="handleClick">
      <el-tab-pane label="加油记录" name="first">
        <Jyjl>
          <el-button class="filter-item" type="primary" icon="el-icon-download" :loading="downloadLoading" @click="onDownload">下载表格</el-button>
        </Jyjl>
      </el-tab-pane>
      <el-tab-pane label="充值记录" name="second">
        <Czjl><el-button class="filter-item" type="primary" icon="el-icon-download" :loading="downloadLoading" @click="onDownload">下载表格</el-button></Czjl>
      </el-tab-pane>
      <el-tab-pane label="核销记录" name="third">
        <Hxjl><el-button class="filter-item" type="primary" icon="el-icon-download" :loading="downloadLoading" @click="onDownload">下载表格</el-button></Hxjl>
      </el-tab-pane>
    </el-tabs>
  </page>
</template>

<script>
  import Jyjl from './_tab_加油记录'
  import Czjl from './_tab_充值记录'
  import Hxjl from './_tab_核销记录'
  import {ExportExcel, ExcelData} from '@/utils/ExportExcel'
  import Vue from 'vue'

  const dataFormat = Vue.filter('dataFormat')
  const oilName = Vue.filter('oilName')
  const money = v => v / 100
  export default {
    name: "shiftDetailTab",
    data() {
      const {shiftId, shopId} = this.$route.query
      return {
        tabName: 'first',
        shiftId,
        downloadLoading: false,
        income: 0,
        form: {
          shiftId,
          shopId
        }
      }
    },
    async activated() {
      const {shiftId: id} = this
      let r = await this.$get('admin/shift/getShiftById', {id})
      this.income = r.obj.income
    },
    methods: {
      handleClick() {

      },
      //备注信息
      async getNode () {
        const {shopName, shift: {operator,shiftName, id, totalMoney}} = await this.getData()
        return `门店名称:${shopName}, 下载时间:${dataFormat(Date.now())}, 交班id:${id}, 交班名称:${shopName}, 实收总额:${totalMoney / 100}元`
      },

      // 获取全部表格数据
      async getData() {
        if (this.getData.obj) return this.getData.obj
        let {obj} = await this.$get('admin/shift/getPrintShiftData', this.form)
        this.getData.obj = obj
        return this.getData.obj
      },
      // 加油记录 表格
      async getRefuel_log() {
        const {detailList: list, shopName} = await this.getData()
        const excel = new ExcelData(list)
        excel.add('订单号', 'orderCode')
        excel.add('枪号', 'gunCode')
        excel.add('平台交易号', 'id')
        excel.add('油品', 'oilCode', oilName)

        excel.add('会员优惠(元)', 'memberPreMoney', money)
        excel.add('专车优惠(元)', 'carpreferMoney', money)
        excel.add('优惠券优惠(元)', 'couponMoney', money)
        excel.add('加油金额(元)', 'wxoil', money)
        excel.add('非油金额(元)', 'wxcommodit', money)
        excel.add('总优惠(元)', 'discount', money)

        excel.add('支付时间', 'payDate', dataFormat)
        excel.add('付款状态', 'state', v => v ? '已支付' : '未支付')
        return {
          ...excel.getData(),
          sheetName: '加油记录',
          title: await this.getNode()
        }
      },


      // 充值记录 表格
      async recharge_log() {
        const {recordList: list, shopName} = await this.getData()
        const excel = new ExcelData(list)
        excel.add('订单号', 'orderCode')
        excel.add('用户id', 'userId')
        excel.add('充值用户', 'nick')
        excel.add('充值金额', 'recodeMoney', money)
        excel.add('支付金额', 'payMoney', money)

        excel.add('储值卡号', 'card')
        excel.add('交易号', 'wxPayCode')
        excel.add('充值状态', 'state', v => ['未支付', '支付未充值', '支付已充值', '申请退款', '退款成功', '退款失败'][v - 1])
        excel.add('支付时间', 'payDate', dataFormat)

        return {
          ...excel.getData(),
          sheetName: '充值记录',
          title: await this.getNode()
        }
      },

      // 核销记录 表格
      async verification_log() {
        const {orderList: list, shopName} = await this.getData()

        const excel = new ExcelData(list)

        excel.add('订单号', 'orderNumber')
        excel.add('用户id', 'userId')
        excel.add('兑换用户', 'nick')
        excel.add('积分', 'payMoney')

        excel.add('下单时间', 'payTime', dataFormat)
        excel.add('核销时间', 'exchangeDate', dataFormat)
        excel.add('状态', 'state', v => ({2: '待核销', 3: '已核销'}[v]))

        return {
          ...excel.getData(),
          sheetName: '核销记录',
          title: await this.getNode()
        }
      },

      async onDownload() {
        this.downloadLoading = true
        try {
          const d1 = await this.getRefuel_log()
          const d2 = await this.recharge_log()
          const d3 = await this.verification_log()
          const excel = new ExportExcel('交班详情报表')
          excel.addSheet(d1).addSheet(d2).addSheet(d3)
          await excel.download()
        } finally {
          this.downloadLoading = false
        }
      }
    },
    components: {
      Jyjl, Czjl, Hxjl
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ .el-tabs__header {
    margin-bottom: 0 !important;
  }

  /deep/ .el-tabs__content {
    border: 1px solid #e4e7ed;
    border-top: none;
  }
</style>
